<%--
  Created by .
  User: Srikanth
  
--%>

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%--@elvariable id="actionBean" type="com.depo.quiggle.view.controller.BillingInvoicePayableAction"--%>
<%@ include file="/WEB-INF/jsp/include/taglibs.jsp" %>
<%@ page import="com.depo.quiggle.view.controller.QglLogDetailAccountingAction" %>
<%@ page import="com.depo.quiggle.view.controller.BillingInvoicePayableAction" %>

<div class="inv-heading">INVOICE ACCOUNTS PAYABLE </div><a  class="backLink" title="Click here to view Account Payable Invoices" href="billing-payable.action">Payable Invoices </a>
<div id="rateTableForm" title="Rate Table">
</div>
<stripes:form beanclass="com.depo.quiggle.view.controller.BillingInvoicePayableAction">
<div id="invoice">
    <span class="f-l"><!-- Invoice # : ${actionBean.invoice.invoiceId} -->    ${actionBean.invoice.invoiceName}
            
    	<a href="javascript:{}" id="detailsLink" class="detailsLink">[ Click Here for Details ]</a>
    	<c:if test="${fn:length(actionBean.invoice.resourceAddressList) > 1}">
    	<a href="javaScript:showAddresses();">Change Address</a>
    	</c:if>
    </span>
    <span class="f-r" id="curDate"> </span>
</div>
<div id="scopist-rate-item-form" title="Create  Scopist New RateItem"  style="display:none;">
            <p class="agency-validation-tips">All form fields are required.</p>
            <stripes:form action="#">
                <fieldset>
                    <div>
                        <input type="hidden" name="block-id" class="block-id" value=""/>
                        <label for="scopist-rate-item">Code</label>
                        <input type="text" name="name" maxlength="10" id="scopist-rate-item-code" class="initial text ui-widget-content ui-corner-all" />
                   
                        <label for="scopist-rate-item-description">Description</label>
                        <input type="text" name="email" maxlength="50" id="scopist-rate-item-code-description" class="text ui-widget-content ui-corner-all" />
                   
                        <label for="scopist-rate-item-value">Value</label>
                        <input type="text" name="email" maxlength="50" id="scopist-rate-item-value" class="text ui-widget-content ui-corner-all" />
                   
                   
                        <label for="scopist-rate-item-unit">Unit</label>                   
                         <stripes:select id="scopist-rate-item-unit" name="scopist-rate-item-unit" class="price-type-id">
                              <stripes:options-collection collection="${actionBean.ratePriceType}" label="type" value="id"/>
                        </stripes:select>
                      
                  
                        <label for="scopist-rate-item-perunit">PerUnit</label>                        
                         <stripes:select id="scopist-rate-item-perunit" name="scopist-rate-item-perunit"  class="rate-item-list">
                              <stripes:options-collection collection="${actionBean.ratUnitType}" label="type" value="id"/>
                        </stripes:select> 
                        
                        
                         <stripes:select id="scopist-rate-item-perunit-expedite" name="scopist-rate-item-unit" class="expedite-rate-item-list">
                        </stripes:select>                      
                   
                        <label for="scopist-rate-item-reimbursable">Reimbursable</label>
                        <input type="checkbox" name="email" maxlength="50" id="scopist-rate-item-reimbursable" class="text ui-widget-content ui-corner-all" />
                    
                        <label for="scopist-rate-item-taxable">Taxable</label>
                        <input type="checkbox" name="email" maxlength="50" id="scopist-rate-item-taxable" class="text ui-widget-content ui-corner-all" />
                    </div>
                </fieldset>
            </stripes:form>
        </div>
         <div id="agency-form1" title="Create  Proofer New RateItem" style="display:none;">
            <p class="agency-validation-tips">All form fields are required.</p>
            <stripes:form action="#">
                <fieldset>
                    <div>
                        <input type="hidden" name="block-id" class="block-id" value=""/>
                        <label for="proofer-rate-item">Code</label>
                        <input type="text" name="name" maxlength="10" id="proofer-rate-item-code" class="initial text ui-widget-content ui-corner-all" />
                   
                        <label for="proofer-rate-item-description">Description</label>
                        <input type="text" name="email" maxlength="50" id="proofer-rate-item-code-description" class="text ui-widget-content ui-corner-all" />
                   
                        <label for="proofer-rate-item-value">Value</label>
                        <input type="text" name="email" maxlength="50" id="proofer-rate-item-value" class="text ui-widget-content ui-corner-all" />
                   
                        <label for="proofer-rate-item-unit">Unit</label>                   
                        
                          <stripes:select id="proofer-rate-item-unit" name="proofer-rate-item-unit" class="price-type-id">
                              <stripes:options-collection collection="${actionBean.ratePriceType}" label="type" value="id"/>
                        </stripes:select>
                  
                        <label for="proofer-rate-item-perunit">PerUnit</label>
                        
                         <stripes:select id="proofer-rate-item-perunit" name="proofer-rate-item-perunit" class="rate-item-list">
                              <stripes:options-collection collection="${actionBean.ratUnitType}" label="type" value="id"/>
                        </stripes:select>  
                        
                        <stripes:select id="proofer-rate-item-perunit-expedite" name="proofer-rate-item-perunit" class="expedite-rate-item-list">
                        </stripes:select>         
                   
                        <label for="proofer-rate-item-reimbursable">Reimbursable</label>
                        <input type="checkbox" name="email" maxlength="50" id="proofer-rate-item-reimbursable" class="text ui-widget-content ui-corner-all" />
                    
                        <label for="proofer-rate-item-taxable">Taxable</label>
                        <input type="checkbox" name="email" maxlength="50" id="proofer-rate-item-taxable" class="text ui-widget-content ui-corner-all" />
                    </div>
                </fieldset>
            </stripes:form>
        </div>
        <div id="agency-cc-rate-item-form" title="Create  Proofer New RateItem" style="display:none;">
		<div id="agency-cc-rate-item-formErrorMsgDiv" class="fontStyle"></div>
            <p class="agency-validation-tips">All form fields are required.</p>
            <stripes:form action="#">
                <fieldset>
                    <div>
                        <input type="hidden" name="block-id" class="block-id" value=""/>
                        <label for="agency-cc-rate-item">Code</label>
                        <input type="text" name="name" maxlength="10" id="agency-cc-rate-item-code" class="initial text ui-widget-content ui-corner-all" />
                   
                        <label for="agency-cc-rate-item-description">Description</label>
                        <input type="text" name="email" maxlength="50" id="agency-cc-rate-item-code-description" class="text ui-widget-content ui-corner-all" />
                   
                        <label for="agency-cc-rate-item-value">Value</label>
                        <input type="text" name="email" maxlength="50" id="agency-cc-rate-item-value" class="text ui-widget-content ui-corner-all" />
                   
                        <label for="agency-cc-rate-item-unit">Unit</label>                   
                        
                          <stripes:select id="agency-cc-rate-item-unit" name="agency-cc-rate-item-unit" class="price-type-id">
                              <stripes:options-collection collection="${actionBean.ratePriceType}" label="type" value="id"/>
                        </stripes:select>
                  
                        <label for="agency-cc-rate-item-perunit">PerUnit</label>
                        
                         <stripes:select id="agency-cc-rate-item-perunit" name="agency-cc-rate-item-perunit" class="rate-item-list">
                              <stripes:options-collection collection="${actionBean.ratUnitType}" label="type" value="id"/>
                        </stripes:select>   
                        
                          <stripes:select id="agency-cc-rate-item-perunit-expedite" name="agency-cc-rate-item-perunit" class="expedite-rate-item-list">
                        </stripes:select>          
                   
                        <label for="agency-cc-rate-item-reimbursable">Reimbursable</label>
                        <input type="checkbox" name="email" maxlength="50" id="agency-cc-rate-item-reimbursable" class="text ui-widget-content ui-corner-all" />
                    
                        <label for="agency-cc-rate-item-taxable">Taxable</label>
                        <input type="checkbox" name="email" maxlength="50" id="agency-cc-rate-item-taxable" class="text ui-widget-content ui-corner-all" />
                    </div>
                </fieldset>
            </stripes:form>
        </div>
        <div id="notes-form" title="Enter Your Notes" style="display:none;">
            <form action="#">
                <fieldset>
                   <div>
                   <textarea rows="10" cols="40" id="notes"></textarea>
                   </div>
                </fieldset>
            </form>
        </div> 
         <div id="witness-form" title="Enter Your Witness" style="display:none;">
            <form action="#">
                <fieldset>
                   <div>
                   <textarea rows="10" cols="40" id="witness"></textarea>
                   </div>
                </fieldset>
            </form>
        </div> 
        
<div id="servicesreimform" title="Services Reimbursed"  style="display:none;">
             <div id="servicesreimforminner"></div>
             <div id="ratetableview"></div>
        </div>
         <div id="servicesResDiv"  title="Rate Table"  style="display:none;"><div id="servicesResInnerDiv"></div></div>
         <div id="masterTableDiv" title="A/R Master Rate Table "  style="display:none;"><div id="masterTableInnerDiv"></div></div>
         <div id="agency-rate-item-form" title="Create  Agency New RateItem"  style="display:none;">
            <p class="agency-validation-tips">All form fields are required.</p>
            <stripes:form action="#">
                <fieldset>
                    <div>
                        <input type="hidden" name="block-id" class="block-id" value=""/>
                        <label for="agency-rate-item">Code</label>
                        <input type="text" name="name" maxlength="10" id="agency-rate-item-code" class="initial text ui-widget-content ui-corner-all" />
                   
                        <label for="agency-rate-item-description">Description</label>
                        <input type="text" name="email" maxlength="50" id="agency-rate-item-code-description" class="descr text ui-widget-content ui-corner-all" />
                   
                        <label for="agency-rate-item-value">Value</label>
                        <input type="text" name="email" maxlength="50" id="agency-rate-item-value" class="value text ui-widget-content ui-corner-all" />
                   
                   
                         <label for="agency-rate-item-unit">Unit</label>
                         <stripes:select id="agency-rate-item-unit" name="agency-rate-item-unit"  class="price-type-id">
                              <stripes:options-collection collection="${actionBean.ratePriceType}" label="type" value="id"/>
                        </stripes:select> 
                  
                        <label for="agency-rate-item-perunit">PerUnit</label>
                        
                         <stripes:select id="agency-rate-item-perunit" name="agency-rate-item-unit"  class="rate-item-list">
                              <stripes:options-collection collection="${actionBean.ratUnitType}" label="type" value="id"/>
                        </stripes:select>  
                        
                         <stripes:select id="agency-rate-item-perunit-expedite" name="agency-rate-item-unit" class="expedite-rate-item-list">
                        </stripes:select>                      
                   
                        <label for="agency-rate-item-reimbursable">Reimbursable</label>
                        <input type="checkbox" name="email" maxlength="50" id="agency-rate-item-reimbursable" class="text ui-widget-content ui-corner-all" />
                    
                        <label for="agency-rate-item-taxable">Taxable</label>
                        <input type="checkbox" name="email" maxlength="50" id="agency-rate-item-taxable" class="text ui-widget-content ui-corner-all" />
                    </div>
                </fieldset>
            </stripes:form>
        </div>
				<div id="estimatePages-form" title="MY HOURS TO PERFORM TASK" style="display:none;">
		<div id="estimatePages-formInnerDiv"></div>
            
        </div>
<div class="table invoice-table">

    <div class="tr">
        <div class="td c1">
            
            <div id="detailAccounting" style="display:none;">
			<fmt:setBundle basename="help" var="help"/>
            	<div class="qgl-pending-list">
					<div class="job-table" id="detailAccounting">
                       <div class="job-th job-row" id="job-placeholder">
                          <div class="job-column job-th agency">A/R</div>
                          <div class="job-column job-th date-taken">DATE TAKEN</div>
                          <div class="job-column job-th est-pgs">EST PGS</div>
                          <div class="job-column job-th scopist">SCOPIST</div>
                          <div class="job-column job-th proofer">PROOFER</div>
                          <div class="job-column job-th case-name">CASE/JOB NAME</div>
                          <div class="job-column job-th scopist-hrs">SCOPIST HRS</div>
                          <div class="job-column job-th proofer-hrs">PROOFER HRS</div>
                          <div class="job-column job-th total-ar">TOTAL A/R</div>
                          <div class="job-column job-th agency-due">DUE DATE AGY</div>
                          <div class="job-column job-th hrs-to-do">HRS TO DO</div>         
                      </div>
                      <div class="job-th job-row" id="job-placeholder">
               			 <div class="job-column job-th type">TYPE</div>
                		 <div class="job-column job-th job">JOB #</div>
               			 <div class="job-column job-th actul-pgs">ACTUAL</div>
               			 <div class="job-column job-th scop-to">DATE TO</div>
                		 <div class="job-column job-th prof-to">DATE TO</div>
              		     <div class="job-column job-th witness">WITNESS</div>
              		     <div class="job-column job-th scop-actul-pgs">ACTUAL</div>
               			 <div class="job-column job-th prof-actul-pgs">ACTUAL</div>
               			 <div class="job-column job-th total-ap">TOTAL A/P</div>
               			 <div class="job-column job-th due-atty-in">DUE DATE CLIENT</div>
                		 <div class="job-column job-th total-hrs">TOTAL HRS</div>
                      </div>
                      <div class="job-th job-row" id="job-placeholder">
               			 <div class="job-column job-th docs">Orig +</div>
                		 <div class="job-column job-th services-reimbured">REIMBURSED Services/ Expenses</div>
                		 <div class="job-column job-th services-nonreimbured">NON-REIMBURSED Services/ Expenses</div>
                		 <div class="job-column job-th scop-from">DATE FROM</div>
               			 <div class="job-column job-th prof-from">DATE FROM</div>
               			 <div class="job-column job-th notes">NOTES</div>
                		 <div class="job-column job-th notes">TTL DUE SCOPIST</div>
                 		 <div class="job-column job-th actul-turned-in">TTL DUE PROOFER</div>
                		 <div class="job-column job-th status">TOTAL NET</div>
                		 <div class="job-column job-th actul-turned-in">TURN-IN DATE</div>
                		 <div class="job-column job-th balance-due">BAL DUE</div>
           			  </div>
          			 </div>
					
					<div id="email-form" title="Select Email Addresses" style="display:none;">
            <form action="#">
       <img id="ajaxImage" src="${pageContext.request.contextPath}/images/billing-invoice/search.gif" style="float:right;display:none;" width="16" height="16" alt="Close" id="close"/> 
            
        <div id="moreEmail">   
		<div id="errorMsgDiv"></div>
         <c:forEach items="${actionBean.invoice.toMailAddresses}" var="userAddress" varStatus="uLoop">         
          <div style="margin:2px 2px 2px 2px;"><input type="checkbox" id="check${uLoop.index}" class="emailAddrs"></input>
          <c:if test="${userAddress.userName != null }">
            <input id="mailerName${uLoop.index}" type="text" value="${userAddress.userName}" style="width:150px;"></input>
          </c:if>
          <c:if test="${userAddress.userName == null }">
            <input id="mailerName${uLoop.index}" type="text" value="" style="width:150px;"></input>
          </c:if>
          <input id="mail${uLoop.index}" type="text" value="${userAddress.emailAddress}" style="width:200px;"></input><br></div>         
         </c:forEach>
         </div>
         <div id="addMail"></div>
         
         
            </form>
        </div> 
				
					
					  <div id="agency-form" title="Create New A/R">
				            <p class="agency-validation-tips">All form fields are required.</p>
				            <form action="#">
				                <fieldset>
				                    <div >
				                        <input type="hidden" name="block-id" class="block-id" value=""/>
				                        <label for="agency-initial">Initial</label>
				                        <input type="text" name="name" maxlength="10"  id="agency-initial" class="initial text ui-widget-content ui-corner-all" style="margin-left:4px;"/>
				                    </div>
				                    <div class="p-5" style="padding:5px 0px 0px;">
				                        <label for="agency-name">Name</label>
				                        <input type="text" name="email" maxlength="50" id="agency-name" class="text ui-widget-content ui-corner-all" title="<fmt:message bundle='${help}' key='help.qgl.CREATE_NEW_AGENCY_NAME'/>"/>
				                    </div>
				                </fieldset>
				            </form>
				        </div>
				        <div id="scopist-form" title="Create New Scopist">
				            <p class="agency-validation-tips">All form fields are required.</p>
				            <form action="#">
				                <fieldset>
				                    <div >
				                        <input type="hidden" name="block-id" class="block-id" value=""/>
				                        <label for="scopist-initial">Initial</label>
				                        <input type="text" name="name" maxlength="10" id="scopist-initial" class="initial text ui-widget-content ui-corner-all" style="margin-left:4px;"/>
				                    </div>
				                    <div class="p-5" style="padding:5px 0px 0px;">
				                        <label for="scopist-name">Name</label>
				                        <input type="text" name="email" maxlength="50" id="scopist-name" class="text ui-widget-content ui-corner-all" title="<fmt:message bundle='${help}' key='help.qgl.CREATE_NEW_SCOPIST_NAME'/>"/>
				                    </div>
				                </fieldset>
				            </form>
				        </div>
				      
				        <div id="proofer-form" title="Create New Proofer">
				            <p class="agency-validation-tips">All form fields are required.</p>
				            <form action="#">
				                <fieldset>
				                    <div >
				                        <input type="hidden" name="block-id" class="block-id" value=""/>
				                        <label for="proofer-initial">Initial</label>
				                        <input type="text" name="name"  maxlength="10" id="proofer-initial" class="initial text ui-widget-content ui-corner-all" style="margin-left:4px;"/>
				                    </div>
				                    <div class="p-5" style="padding:5px 0px 0px;">
				                        <label for="proofer-name">Name</label>
				                        <input type="text" name="email" maxlength="50" id="proofer-name" class="text ui-widget-content ui-corner-all" title="<fmt:message bundle='${help}' key='help.qgl.CREATE_NEW_PROOFER_NAME'/>"/>
				                    </div>
				                </fieldset>
				            </form>
				        </div>
				        
				          
				        
				  <form class="job-record-block job-table" id="saveJobDtlForm">
                  <div class="job-row">
                  <div class="job-column agency" id="agency-0">
                    <c:if test="${actionBean.invoice.agencyEditable}">   
                       <c:if test="${actionBean.job.agencyEnabled == true}">    
 					      <span class="view t-tip" title="<c:if test='${actionBean.job.agencyRateCode == null}'>No Rate Code Selected For Agency, </c:if><c:if test='${actionBean.job.agencyRateCode != null}'>Agency Rate Code: ${actionBean.job.agencyRateCode}, </c:if><fmt:message bundle='${help}' key='help.qgl.dblclck.AGENCY'/>"><span class="agencylink" id="agencylink${actionBean.invoice.job.jobId}"> <a href="javascript:{ getRateTableId(${actionBean.invoice.job.agencyId},${actionBean.invoice.job.jobId },'AGENCY')}">${actionBean.invoice.job.agencyInitial}</a></span></span>
                          <input  class="edit agency-initial" onblur="saveSelectedJob(${actionBean.invoice.job.jobId},true);" maxlength="10" type="text" name="job.agencyInitial" value="${actionBean.invoice.job.agencyInitial}" title="<fmt:message bundle='${help}' key='help.qgl.AGENCY'/>"/>
                       </c:if>
                     
                       <c:if test="${actionBean.job.agencyEnabled == false}">    
 					      <span class="view" title="<fmt:message bundle='${help}' key='help.qgl.dblclck.ARCHIVE'/>"><span class="agencylink" id="agencylink${actionBean.invoice.job.jobId}"> <a href="javascript:{}">${actionBean.invoice.job.agencyInitial}</a></span></span>
                          <input  class="edit agency-initial" onblur="saveSelectedJob(${actionBean.invoice.job.jobId},true);" maxlength="10" type="text" name="job.agencyInitial" value="${actionBean.invoice.job.agencyInitial}" title="<fmt:message bundle='${help}' key='help.qgl.AGENCY'/>"/>
                       </c:if>
                    </c:if>
                    <c:if test="${!actionBean.invoice.agencyEditable}">
                      <c:if test="${actionBean.job.agencyEnabled == true}">    
 					      <span class="t-tip agencylink${actionBean.invoice.job.jobId}" title="<c:if test='${actionBean.job.agencyRateCode == null}'>No Rate Code Selected For Agency, </c:if><c:if test='${actionBean.job.agencyRateCode != null}'>Agency Rate Code: ${actionBean.job.agencyRateCode}, </c:if><fmt:message bundle='${help}' key='help.qgl.dblclck.AGENCY'/>">${actionBean.invoice.job.agencyInitial}</span>
                       </c:if>
                     
                       <c:if test="${actionBean.job.agencyEnabled == false}">    
 					      <span class="t-tip" title="<fmt:message bundle='${help}' key='help.qgl.dblclck.ARCHIVE'/>">${actionBean.invoice.job.agencyInitial}</span>
                       </c:if>
                         
                    </c:if>
                     <input type="hidden" id="agencyId${actionBean.invoice.job.jobId}" class="agency-id" name="job.agencyId" value="${actionBean.invoice.job.agencyId}"/>
                        <!-- <input  class="edit agency-initial" onblur="saveSelectedJob(${actionBean.invoice.job.jobId},true);" maxlength="10" type="text" name="job.agencyInitial" value="${actionBean.invoice.job.agencyInitial}" title="<fmt:message bundle='${help}' key='help.qgl.AGENCY'/>"/> -->
                        <input type="hidden" class="agency-name" name="job.agencyName" value=""/>
                    </div>
                    <div class="job-column date-taken date">
                        <span class="view">${actionBean.invoice.job.takenDateString}</span>
                        <c:if test="${!actionBean.invoice.agencyEditable}">
                          <span class="edit">${actionBean.invoice.job.takenDateString}</span>
                          <input style="display:none" id="dateTaken${actionBean.invoice.job.jobId}"  onchange="saveSelectedJob(${actionBean.invoice.job.jobId},false);"  type="text" name="job.takenDate" id="job.takenDate-0" value="${actionBean.invoice.job.takenDateString}" readonly="readonly">
                        </c:if>
                        <c:if test="${actionBean.invoice.agencyEditable}">
                         <input class="edit date-picker" id="dateTaken${actionBean.invoice.job.jobId}"  onchange="saveSelectedJob(${actionBean.invoice.job.jobId},false);"  type="text" name="job.takenDate" id="job.takenDate-0" value="${actionBean.invoice.job.takenDateString}" readonly="readonly">
                        </c:if>
                    </div>
                    <div class="job-column est-pgs number">
                        <span class="view">${actionBean.invoice.job.estimatePages}</span>
                        <c:if test="${!actionBean.invoice.agencyEditable}">
                          <span class="edit">${actionBean.invoice.job.estimatePages}</span>
                          <input style="display:none" type="text" id="estPgs${actionBean.invoice.job.jobId}"  onchange="saveSelectedJob(${actionBean.invoice.job.jobId},true);caluculateAllHours(${actionBean.invoice.job.jobId});"  name="job.estimatePages" value="${actionBean.invoice.job.estimatePages}" title="<fmt:message bundle='${help}' key='help.qgl.EST_PGS'/>">
                        </c:if>
                        <c:if test="${actionBean.invoice.agencyEditable}">
                          <input class="edit billingestimatePages" type="text" id="estPgs${actionBean.invoice.job.jobId}"  onchange="saveSelectedJob(${actionBean.invoice.job.jobId},true);caluculateAllHours(${actionBean.invoice.job.jobId});"  name="job.estimatePages" value="${actionBean.invoice.job.estimatePages}" title="<fmt:message bundle='${help}' key='help.qgl.EST_PGS'/>">
                        </c:if>
                    </div>
                   <div class="job-column scopist" id="scopist-0">
                     <c:if test="${actionBean.invoice.scopistEditable}">
						<c:choose>
	                   		<c:when test="${actionBean.invoice.job.scopistId eq actionBean.userId}">
	                        <span class="view"><span class="scopistlink" id="scopistlink${actionBean.invoice.job.jobId}">${actionBean.invoice.job.scopistInitial}</span></span>
	                           <input  class="edit scopist-initial" maxlength="10"  onblur="saveSelectedJob(${actionBean.invoice.job.jobId},true);caluculateAllHours(${actionBean.invoice.job.jobId});"  type="text" name="job.scopistInitial" value="${actionBean.invoice.job.scopistInitial}" title="<fmt:message bundle='${help}' key='help.qgl.SCOPIST'/>"/>
	                        </c:when>
	                        <c:otherwise>

	                        <c:if test="${actionBean.job.scopistEnabled == true}">  
	                        
	                        <span class="view t-tip" title="<c:if test='${actionBean.job.scopiestRateCode == null}'>No Rate Code Selected For Scopist, </c:if><c:if test='${actionBean.job.scopiestRateCode != null}'>Scopist Rate Code: ${actionBean.job.scopiestRateCode}, </c:if><fmt:message bundle='${help}' key='help.qgl.dblclck.SCOPIST'/>"> <span class="scopistlink" id="scopistlink${actionBean.invoice.job.jobId}">
							        <a href="javascript:{ getRateTableId(${actionBean.job.scopistId},${actionBean.invoice.job.jobId },'SCOPIST')}">${actionBean.invoice.job.scopistInitial}</a>
							</span></span>
	                           <input  class="edit scopist-initial" maxlength="10"  onblur="saveSelectedJob(${actionBean.invoice.job.jobId},true);caluculateAllHours(${actionBean.invoice.job.jobId});"  type="text" name="job.scopistInitial" value="${actionBean.invoice.job.scopistInitial}" title="<fmt:message bundle='${help}' key='help.qgl.SCOPIST'/>"/>
	                        </c:if>
	                        
	                        <c:if test="${actionBean.job.scopistEnabled == false}">  
	                        
	                        <span class="view" title="<fmt:message bundle='${help}' key='help.qgl.dblclck.ARCHIVE'/>"><span class="scopistlink" id="scopistlink${actionBean.invoice.job.jobId}"> <a href="javascript:{}">${actionBean.invoice.job.scopistInitial}</a></span></span>
	                           <input  class="edit scopist-initial" maxlength="10"  onblur="saveSelectedJob(${actionBean.invoice.job.jobId},true);caluculateAllHours(${actionBean.invoice.job.jobId});"  type="text" name="job.scopistInitial" value="${actionBean.invoice.job.scopistInitial}" title="<fmt:message bundle='${help}' key='help.qgl.SCOPIST'/>"/>
	                        </c:if>
	                        
	                        </c:otherwise>
                        </c:choose>  
                        </c:if>
                        <c:if test="${!actionBean.invoice.scopistEditable}"> 
                         <c:choose>
	                   		<c:when test="${actionBean.invoice.job.scopistId eq actionBean.userId}">
	                        <span ><span class="scopistlink" id="scopistlink${actionBean.invoice.job.jobId}">${actionBean.invoice.job.scopistInitial}</span></span>
	                        </c:when>
	                        <c:otherwise>
                           <c:if test="${actionBean.job.scopistEnabled == true}"> 
                             <span class=" t-tip" title="<c:if test='${actionBean.job.scopiestRateCode == null}'>No Rate Code Selected For Scopist, </c:if><c:if test='${actionBean.job.scopiestRateCode != null}'>Scopist Rate Code: ${actionBean.job.scopiestRateCode}, </c:if><fmt:message bundle='${help}' key='help.qgl.dblclck.SCOPIST'/>"> <span class="scopistlink" id="scopistlink${actionBean.invoice.job.jobId}">
							  ${actionBean.invoice.job.scopistInitial}
							</span></span>
                           </c:if>
                           <c:if test="${actionBean.job.scopistEnabled == false}">
                             <span class="t-tip" title="<fmt:message bundle='${help}' key='help.qgl.dblclck.ARCHIVE'/>"><span class="scopistlink" id="scopistlink${actionBean.invoice.job.jobId}"> <a href="javascript:{}">${actionBean.invoice.job.scopistInitial}</a></span></span> 
                           </c:if>
                            </c:otherwise>
                        </c:choose>  
                     </c:if>                             
                     <input type="hidden" id="scopistId${actionBean.invoice.job.jobId}" class="scopist-id" name="job.scopistId" value="${actionBean.invoice.job.scopistId}"/>
                        <!-- <input  class="edit scopist-initial" maxlength="10"  onblur="saveSelectedJob(${actionBean.invoice.job.jobId},true);caluculateMyHoursTODO(${actionBean.invoice.job.jobId});"  type="text" name="job.scopistInitial" value="${actionBean.invoice.job.scopistInitial}" title="<fmt:message bundle='${help}' key='help.qgl.SCOPIST'/>"/> -->
                        <input type="hidden"  id="scopistName${actionBean.invoice.job.jobId}" class="scopist-name" name="job.scopistName" value=""/>
                    
                    
                    <div class="job-column scopist" id="scopist-rate-item-0">
                        <!-- <span class="view">${actionBean.invoice.job.scopistRateItemCode}</span> -->
                        <input type="hidden" id="scopistRateId${actionBean.invoice.job.jobId}" class="scopist-rate-item-id" name="job.scopistRateItemId" value="${actionBean.invoice.job.scopistRateItemId}"/>
                        <!-- <input  class="edit scopist-rate-item-code" maxlength="10" onblur="saveSelectedJob(${actionBean.invoice.job.jobId},true);"  type="text" name="job.scopistRateItemCode" value="${actionBean.invoice.job.scopistRateItemCode}"/> -->
                        <input type="hidden" class="scopist-job-id" name="job.jobId" value="${actionBean.invoice.job.jobId}"/>
     
                    </div>
                    </div> 
                    <div class="job-column proofer" id="proofer-0">
                    <c:if test="${actionBean.invoice.prooferEditable}">
					   <c:choose>
	                    <c:when test="${actionBean.invoice.job.prooferId eq actionBean.userId}">
	                         <span class="view" ><span class="prooferlink" id="prooferlink${actionBean.invoice.job.jobId}">${actionBean.invoice.job.prooferInitial}</span></span>
	                            <input  class="edit proofer-initial" maxlength="10"  onblur="saveSelectedJob(${actionBean.invoice.job.jobId},true);caluculateAllHours(${actionBean.invoice.job.jobId});" type="text" name="job.prooferInitial"  value="${actionBean.invoice.job.prooferInitial}" title="<fmt:message bundle='${help}' key='help.qgl.PROOFER'/>"/>
	                    </c:when>
                        <c:otherwise>
                           <c:if test="${actionBean.job.prooferEnabled == true}">
                             <span class="view t-tip" title="<c:if test='${actionBean.job.prooferRateCode == null}'>No Rate Code Selected For Proofer, </c:if><c:if test='${actionBean.job.prooferRateCode != null}'>Proofer Rate Code: ${actionBean.job.prooferRateCode}, </c:if><fmt:message bundle='${help}' key='help.qgl.dblclck.PROOFER'/>"><span class="prooferlink" id="prooferlink${actionBean.invoice.job.jobId}">
                               <a href="javascript:{ getRateTableId(${actionBean.invoice.job.prooferId},${actionBean.invoice.job.jobId },'PROOFER')}">${actionBean.invoice.job.prooferInitial}</a>
                             </span></span>
                             <input  class="edit proofer-initial" maxlength="10"  onblur="saveSelectedJob(${actionBean.invoice.job.jobId},true);caluculateAllHours(${actionBean.invoice.job.jobId});" type="text" name="job.prooferInitial"  value="${actionBean.invoice.job.prooferInitial}" title="<fmt:message bundle='${help}' key='help.qgl.PROOFER'/>"/>
                           </c:if>
                           <c:if test="${actionBean.job.prooferEnabled == false}">
                             <span class="view" title="<fmt:message bundle='${help}' key='help.qgl.dblclck.ARCHIVE'/>"><span class="prooferlink" id="prooferlink${actionBean.invoice.job.jobId}"><span class="prooferlink" id="prooferlink${job.jobId}"><a href="javascript:{}">${actionBean.invoice.job.prooferInitial}</a></span></span></span>
                             <input  class="edit proofer-initial" maxlength="10"  onblur="saveSelectedJob(${actionBean.invoice.job.jobId},true);caluculateAllHours(${actionBean.invoice.job.jobId});" type="text" name="job.prooferInitial"  value="${actionBean.invoice.job.prooferInitial}" title="<fmt:message bundle='${help}' key='help.qgl.PROOFER'/>"/>
                           </c:if>
                        </c:otherwise>
                     </c:choose> 
                    </c:if>
                    <c:if test="${!actionBean.invoice.prooferEditable}"> 
                     <c:choose>
	                    <c:when test="${actionBean.invoice.job.prooferId eq actionBean.userId}">
	                         <span><span class="prooferlink" id="prooferlink${actionBean.invoice.job.jobId}">${actionBean.invoice.job.prooferInitial}</span></span>
	                    </c:when>
                        <c:otherwise>
                      <c:if test="${actionBean.job.prooferEnabled == true}">
                        <span class="t-tip" title="<c:if test='${actionBean.job.prooferRateCode == null}'>No Rate Code Selected For Proofer, </c:if><c:if test='${actionBean.job.prooferRateCode != null}'>Proofer Rate Code: ${actionBean.job.prooferRateCode}, </c:if><fmt:message bundle='${help}' key='help.qgl.dblclck.PROOFER'/>"><span class="prooferlink" id="prooferlink${actionBean.invoice.job.jobId}">              
                               ${actionBean.invoice.job.prooferInitial}
                          </span></span>
                      </c:if>
                      <c:if test="${actionBean.job.prooferEnabled == false}">
                        <span class="t-tip" title="<fmt:message bundle='${help}' key='help.qgl.dblclck.ARCHIVE'/>"><span class="prooferlink" id="prooferlink${actionBean.invoice.job.jobId}"><span class="prooferlink" id="prooferlink${job.jobId}"><a href="javascript:{}">${actionBean.invoice.job.prooferInitial}</a></span></span></span>
                      </c:if>
                      </c:otherwise>
                     </c:choose> 
                    </c:if>                                
                       <input type="hidden"  id="prooferId${actionBean.invoice.job.jobId}"  class="proofer-id" name="job.prooferId" value="${actionBean.invoice.job.prooferId}"/>
                        <!-- <input  class="edit proofer-initial" maxlength="10"  onblur="saveSelectedJob(${actionBean.invoice.job.jobId},true);caluculateMyHoursTODO(${actionBean.invoice.job.jobId});" type="text" name="job.prooferInitial"  value="${actionBean.invoice.job.prooferInitial}" title="<fmt:message bundle='${help}' key='help.qgl.PROOFER'/>"/> -->
                        <input type="hidden"  id="prooferName${actionBean.invoice.job.jobId}"  class="proofer-name" name="job.prooferName" value=""/>
                        
                        <div class="job-column scopist" id="proofer-rate-item-0">
                        <!-- <span class="view">${actionBean.invoice.job.prooferRateItemCode}</span> -->
                        <input type="hidden" id="prooferRateId${actionBean.invoice.job.jobId}"  class="proofer-rate-item-id" name="job.prooferRateItemId" value="${actionBean.invoice.job.prooferRateItemId}"/>
                        <!-- <input  class="edit proofer-rate-item-code"  onblur="saveSelectedJob(${actionBean.invoice.job.jobId},true);"  maxlength="10" type="text" name="job.prooferRateItemCode" value="${actionBean.invoice.job.prooferRateItemCode}"/> -->
                       <input type="hidden" class="proofer-job_id" name="job.jobId" value="${actionBean.invoice.job.jobId}"/>
                        
                    </div>
                    </div>
                    <div class="job-column case-name">
                        <span class="view">${actionBean.invoice.job.caseName}</span>
                        <c:if test="${!actionBean.invoice.agencyEditable}">  
                          <span class="edit">${actionBean.invoice.job.caseName}</span>
                          <input  style="display:none;max-width:70px;" id="caseName${actionBean.invoice.job.jobId}"  onblur="saveSelectedJob(${actionBean.invoice.job.jobId},false);"  type="text" name="job.caseName" value="${actionBean.invoice.job.caseName}" title="<fmt:message bundle='${help}' key='help.qgl.CASE/JOB_NAME'/>">
                         </c:if>
                        <c:if test="${actionBean.invoice.agencyEditable}">    
                         <input  style="max-width:95px;" class="edit"  id="caseName${actionBean.invoice.job.jobId}"  onblur="saveSelectedJob(${actionBean.invoice.job.jobId},false);"  type="text" name="job.caseName" value="${actionBean.invoice.job.caseName}" title="<fmt:message bundle='${help}' key='help.qgl.CASE/JOB_NAME'/>">
                        </c:if>
                    </div>
                    <div class="job-column scopist-hrs number">
                        <c:if test="${actionBean.invoice.job.scopistValReq}">
                          <span class="view">${actionBean.invoice.job.scopistHours}</span>
                        </c:if>
                        <c:if test="${!actionBean.invoice.job.scopistValReq}">
                          <span class="view"></span>
                        </c:if>
                        <c:if test="${!actionBean.invoice.agencyEditable}"> 
                          <c:if test="${actionBean.invoice.job.scopistValReq}">
                            <span class="edit">${actionBean.invoice.job.scopistHours}</span>
                            <input  style="display:none"  id="scopistHrs${actionBean.invoice.job.jobId}"  onblur="saveSelectedJob(${actionBean.invoice.job.jobId},true);"  type="text" name="job.scopistHours" value="${actionBean.invoice.job.scopistHours}">
                          </c:if>
                          <c:if test="${!actionBean.invoice.job.scopistValReq}">
                            <span class="edit"></span>
                            <input  style="display:none"  id="scopistHrs${actionBean.invoice.job.jobId}"  onblur="saveSelectedJob(${actionBean.invoice.job.jobId},true);"  type="text" name="job.scopistHours" value="">
                          </c:if>
                        </c:if>
                        <c:if test="${actionBean.invoice.agencyEditable}"> 
                           <c:if test="${actionBean.invoice.job.scopistValReq}">
                             <input  class="edit numberValForDecimal"  id="scopistHrs${actionBean.invoice.job.jobId}"  readonly="readonly" onblur="saveSelectedJob(${actionBean.invoice.job.jobId},true);"  type="text" name="job.scopistHours" value="${actionBean.invoice.job.scopistHours}">
                           </c:if>
                           <c:if test="${!actionBean.invoice.job.scopistValReq}">
                             <input  class="edit numberValForDecimal"  id="scopistHrs${actionBean.invoice.job.jobId}"  readonly="readonly" onblur="saveSelectedJob(${actionBean.invoice.job.jobId},true);"  type="text" name="job.scopistHours" value="">
                           </c:if>
                        </c:if>
                    </div>
                    <div class="job-column proofer-hrs number">
                        <c:if test="${actionBean.invoice.job.prooferValReq}">
                          <span class="view">${actionBean.invoice.job.prooferHours}</span>
                        </c:if>
                        <c:if test="${!actionBean.invoice.job.prooferValReq}">
                          <span class="view"></span>
                        </c:if>
                        <c:if test="${!actionBean.invoice.agencyEditable}">
                          <c:if test="${actionBean.invoice.job.prooferValReq}"> 
                            <span class="edit">${actionBean.invoice.job.prooferHours}</span>
                            <input style="display:none"  id="prooferHrs${actionBean.invoice.job.jobId}"  onblur="saveSelectedJob(${actionBean.invoice.job.jobId},true);"  type="text" name="job.prooferHours" value="${actionBean.invoice.job.prooferHours}">
                          </c:if>
                          <c:if test="${!actionBean.invoice.job.prooferValReq}"> 
                            <span class="edit"></span>
                            <input style="display:none"  id="prooferHrs${actionBean.invoice.job.jobId}"  onblur="saveSelectedJob(${actionBean.invoice.job.jobId},true);"  type="text" name="job.prooferHours" value="">
                          </c:if>
                        </c:if>
                        <c:if test="${actionBean.invoice.agencyEditable}">
                          <c:if test="${actionBean.invoice.job.prooferValReq}">  
                            <input class="edit numberValForDecimal" readonly="readonly" id="prooferHrs${actionBean.invoice.job.jobId}"  onblur="saveSelectedJob(${actionBean.invoice.job.jobId},true);"  type="text" name="job.prooferHours" value="${actionBean.invoice.job.prooferHours}">
                          </c:if>
                          <c:if test="${!actionBean.invoice.job.prooferValReq}">  
                            <input class="edit numberValForDecimal" readonly="readonly" id="prooferHrs${actionBean.invoice.job.jobId}"  onblur="saveSelectedJob(${actionBean.invoice.job.jobId},true);"  type="text" name="job.prooferHours" value="">
                          </c:if>
                        </c:if>
                    </div>
                    <div class="job-column total-ar">
                        
                        <span  id="receivableAmount${actionBean.invoice.job.jobId}"><fmt:formatNumber value="${actionBean.invoice.job.receivableAmount}" type="currency"/></span>
                    </div>
                    <div class="job-column agency-due  date">
                        <span class="view">${actionBean.invoice.job.agencyDueDateString}</span>
                        <c:if test="${!actionBean.invoice.agencyEditable}"> 
                          <span class="edit">${actionBean.invoice.job.agencyDueDateString}</span>
                          <input style="display:none"  id="dueAgenctDt${actionBean.invoice.job.jobId}" onchange="saveSelectedJob(${actionBean.invoice.job.jobId},false);"   type="text" name="job.agencyDueDate" id="job.agencyDueDate-0" value="${actionBean.invoice.job.agencyDueDateString}" readonly="readonly">
                        </c:if>
                        <c:if test="${actionBean.invoice.agencyEditable}"> 
                          <input class="edit date-picker"  id="dueAgenctDt${actionBean.invoice.job.jobId}" onchange="saveSelectedJob(${actionBean.invoice.job.jobId},false);"   type="text" name="job.agencyDueDate" id="job.agencyDueDate-0" value="${actionBean.invoice.job.agencyDueDateString}" readonly="readonly">
                        </c:if>
                    </div>
                    <div class="job-column hrs-to-do number">
                        <span class="view">${actionBean.invoice.job.toDoHours}</span>
                        <c:if test="${!actionBean.invoice.agencyEditable && !actionBean.invoice.scopistEditable && !actionBean.invoice.prooferEditable}">
                          <span class="edit">${actionBean.invoice.job.toDoHours}</span>
                          <input style="display:none" id="hrsToDo${actionBean.invoice.job.jobId}" readonly="readonly" onblur="saveSelectedJob(${actionBean.invoice.job.jobId},false);"  type="text" name="job.toDoHours" value="${actionBean.invoice.job.toDoHours}" title="<fmt:message bundle='${help}' key='help.qgl.HOURS_TO_DO'/>">
                        </c:if>
                        <c:if test="${actionBean.invoice.agencyEditable || actionBean.invoice.scopistEditable || actionBean.invoice.prooferEditable}">
                          <input class="edit" id="hrsToDo${actionBean.invoice.job.jobId}" readonly="readonly" onblur="saveSelectedJob(${actionBean.invoice.job.jobId},false);"  type="text" name="job.toDoHours" value="${actionBean.invoice.job.toDoHours}" title="<fmt:message bundle='${help}' key='help.qgl.HOURS_TO_DO'/>">
                        </c:if>
                    </div>
                  </div>
                   <div class="job-row">
                    <div class="job-column agency" id="jobtype-0">
                        <input type="hidden" id="typeId${actionBean.invoice.job.jobId}" class="type-id agency-rate-item" name="job.jobTypeId" value="${actionBean.invoice.job.jobTypeId}"/>
                        <span class="view jobtypetext">${actionBean.invoice.job.jobCode}</span>
                        <c:if test="${!actionBean.invoice.agencyEditable}">
                          <span class="edit">${actionBean.invoice.job.jobCode}</span>
                        </c:if>
                        <c:if test="${actionBean.invoice.agencyEditable}"> 
                          <input class="edit callAjaxTGetAgencyCodes"  onblur="saveSelectedJob(${actionBean.invoice.job.jobId},true);"   type="text" name="job.jobCode" value="${actionBean.invoice.job.jobCode}">
                        </c:if>
                        <input type="hidden" class="agency-job_id" name="job.jobId" value="${actionBean.invoice.job.jobId}"/>
                        
                    </div>
            
                    <div class="job-column">
                        <span class="view">${actionBean.invoice.job.jobReference}</span>
                        <c:if test="${!actionBean.invoice.agencyEditable}">
                           <span class="edit">${actionBean.invoice.job.jobReference}</span>
                           <input style="display:none"  id="jobReqId${actionBean.invoice.job.jobId}"    type="text" name="job.jobReference" value="${actionBean.invoice.job.jobReference}">
                        </c:if>
                         <c:if test="${actionBean.invoice.agencyEditable}">
                          <input class="edit job-id"  id="jobReqId${actionBean.invoice.job.jobId}"    type="text" name="job.jobReference" value="${actionBean.invoice.job.jobReference}">
                         </c:if>
                    </div>              
                    <div class="job-column actul-pgs number">
                        <span id="actulPgsView${actionBean.invoice.job.jobId}" class="view">${actionBean.invoice.job.actualPages}</span>
                        <c:if test="${actionBean.invoice.agencyEditable}">
                          <input class="edit numberVal"  id="actulPgs${actionBean.invoice.job.jobId}"  onchange="saveccvalue(${actionBean.invoice.job.jobId},this.id, ${actionBean.invoice.job.agencyId});"  onblur="saveSelectedJob(${actionBean.invoice.job.jobId},true);" type="text" name="job.actualPages" value="${actionBean.invoice.job.actualPages}">
                        </c:if>
                        <c:if test="${!actionBean.invoice.agencyEditable}">
                          <span class="edit">${actionBean.invoice.job.actualPages}</span>
                          <input style="display:none" id="actulPgs${actionBean.invoice.job.jobId}" onblur="saveSelectedJob(${actionBean.invoice.job.jobId},true);" type="text" name="job.actualPages" value="${actionBean.invoice.job.actualPages}">
                        </c:if>
                    </div>
                    <div class="job-column scop-to date">
                        <span class="view">${actionBean.invoice.job.scopistToDateString}</span>
                        <c:if test="${actionBean.invoice.scopistEditable}">
                          <input class="edit date-picker"  onchange="saveSelectedJob(${actionBean.invoice.job.jobId},false);"  id="scopistTo${actionBean.invoice.job.jobId}"  type="text" name="job.scopistToDate"  value="${actionBean.invoice.job.scopistToDateString}" readonly="readonly">                    
                        </c:if>
                        <c:if test="${!actionBean.invoice.scopistEditable}">
                          <span class="edit">${actionBean.invoice.job.scopistToDateString}</span>
                          <input style="display:none"  onchange="saveSelectedJob(${actionBean.invoice.job.jobId},false);"  id="scopistTo${actionBean.invoice.job.jobId}"  type="text" name="job.scopistToDate"  value="${actionBean.invoice.job.scopistToDateString}" readonly="readonly">                    
                        </c:if>
                    </div>
                    <div class="job-column prof-to  date">
                        <span class="view">${actionBean.invoice.job.prooferToDateString}</span>
                        <c:if test="${actionBean.invoice.prooferEditable}">
                          <input class="edit date-picker" type="text"  onchange="saveSelectedJob(${actionBean.invoice.job.jobId},false);" id="prooferTo${actionBean.invoice.job.jobId}"  name="job.prooferToDate"  value="${actionBean.invoice.job.prooferToDateString}" readonly="readonly">
                        </c:if>
                        <c:if test="${!actionBean.invoice.prooferEditable}">
                          <span class="edit">${actionBean.invoice.job.prooferToDateString}</span>
                           <input style="display:none" type="text"  onchange="saveSelectedJob(${actionBean.invoice.job.jobId},false);" id="prooferTo${actionBean.invoice.job.jobId}"  name="job.prooferToDate"  value="${actionBean.invoice.job.prooferToDateString}" readonly="readonly">
                        </c:if>
                    </div>
                    <div class="job-column witness">
                        <span class="view">${actionBean.invoice.job.witness}</span>
                        <c:if test="${actionBean.invoice.agencyEditable}">
                          <input style="max-width:70px;" class="edit witnes"  id="witness${actionBean.invoice.job.jobId}"  onblur="saveSelectedJob(${actionBean.invoice.job.jobId},false);"  onchange="saveSelectedJob(${actionBean.invoice.job.jobId},false);"   type="text" name="job.witness" value="${actionBean.invoice.job.witness}">
                        </c:if>
                        <c:if test="${!actionBean.invoice.agencyEditable}">
                          <span class="edit">${actionBean.invoice.job.witness}</span>
                          <input style="display:none;max-width:95px;" id="witness${actionBean.invoice.job.jobId}"  onblur="saveSelectedJob(${actionBean.invoice.job.jobId},false);"  onchange="saveSelectedJob(${actionBean.invoice.job.jobId},false);"   type="text" name="job.witness" value="${actionBean.invoice.job.witness}">
                        </c:if>
                    </div>
                    <div class="job-column scop-actul-pgs number">
                        <span class="view">${actionBean.invoice.job.scopistActualPages}</span>
                        <c:if test="${!actionBean.invoice.scopistEditable}">
                          <span class="edit">${actionBean.invoice.job.scopistActualPages}</span>
                          <input style="display:none"  id="scActulPgs${actionBean.invoice.job.jobId}"  onblur="saveSelectedJob(${actionBean.invoice.job.jobId},true);"  type="text" name="job.scopistActualPages" value="${actionBean.invoice.job.scopistActualPages}">
                        </c:if>
                        <c:if test="${actionBean.invoice.scopistEditable}">
                          <input class="edit numberVal"  id="scActulPgs${actionBean.invoice.job.jobId}"  onblur="saveSelectedJob(${actionBean.invoice.job.jobId},true);"  type="text" name="job.scopistActualPages" value="${actionBean.invoice.job.scopistActualPages}">
                        </c:if>
                    </div>
                    <div class="job-column proof-actul-pgs number">
                        <span class="view">${actionBean.invoice.job.prooferActualPages}</span>
                        <c:if test="${!actionBean.invoice.prooferEditable}">
                          <span class="edit">${actionBean.invoice.job.prooferActualPages}</span>
                          <input style="display:none"  id="prActulPgs${actionBean.invoice.job.jobId}"  onblur="saveSelectedJob(${actionBean.invoice.job.jobId},true);" type="text" name="job.prooferActualPages" value="${actionBean.invoice.job.prooferActualPages}">
                        </c:if>
                        <c:if test="${actionBean.invoice.prooferEditable}">
                          <input class="edit numberVal"  id="prActulPgs${actionBean.invoice.job.jobId}"  onblur="saveSelectedJob(${actionBean.invoice.job.jobId},true);" type="text" name="job.prooferActualPages" value="${actionBean.invoice.job.prooferActualPages}">
                        </c:if>
                    </div>
                    <div class="job-column total-ap">
                         <span id="payableAmount${actionBean.invoice.job.jobId}"><fmt:formatNumber value="${actionBean.invoice.job.payableAmount}" type="currency"/></span>
                    </div>
                    <div class="job-column due-atty-in  date">
                        <span class="view">${actionBean.invoice.job.attyDueDateString}</span>
                        <c:if test="${actionBean.invoice.agencyEditable}">
                          <input class="edit date-picker" type="text"  onchange="saveSelectedJob(${actionBean.invoice.job.jobId},false);" name="job.attyDueDate" id="dueAuttyDt${actionBean.invoice.job.jobId}"  value="${actionBean.invoice.job.attyDueDateString}" readonly="readonly">
                       </c:if>
                       <c:if test="${!actionBean.invoice.agencyEditable}">
                         <span class="edit">${actionBean.invoice.job.attyDueDateString}</span>
                         <input style="display:none" type="text"  onchange="saveSelectedJob(${actionBean.invoice.job.jobId},false);" name="job.attyDueDate" id="dueAuttyDt${actionBean.invoice.job.jobId}"  value="${actionBean.invoice.job.attyDueDateString}" readonly="readonly">
                       </c:if>
                    </div>
                    <div class="job-column total-hrs number">
                        <span class="view">${actionBean.invoice.job.totalHours}</span>
                        <c:if test="${actionBean.invoice.agencyEditable || actionBean.invoice.scopistEditable || actionBean.invoice.prooferEditable}">
                          <input class="edit"  id="totalHrs${actionBean.invoice.job.jobId}"  readonly="readonly"  onblur="saveSelectedJob(${actionBean.invoice.job.jobId},false);"  type="text" name="job.totalHours" value="${actionBean.invoice.job.totalHours}">
                        </c:if>
                        <c:if test="${!actionBean.invoice.agencyEditable && !actionBean.invoice.scopistEditable && !actionBean.invoice.prooferEditable}">
                          <span class="edit">${actionBean.invoice.job.totalHours}</span>
                          <input style="display:none"  id="totalHrs${actionBean.invoice.job.jobId}"  readonly="readonly"  onblur="saveSelectedJob(${actionBean.invoice.job.jobId},false);"  type="text" name="job.totalHours" value="${actionBean.invoice.job.totalHours}">
                        </c:if>
                    </div>
                  </div>
                   <div class="job-row">
                     <div class="job-column docs">
                        <span id="ccValView${actionBean.invoice.job.jobId}" class="view">${actionBean.invoice.job.ccPages}</span>
                        <c:if test="${actionBean.invoice.agencyEditable}">
                          <input class="edit cc-code numberVal"  id="ccVal${actionBean.invoice.job.jobId}" onchange="saveccvalue(${actionBean.invoice.job.jobId},this.id, ${actionBean.invoice.job.agencyId});"  onblur="saveSelectedJob(${actionBean.invoice.job.jobId},true);saveccvalue(${actionBean.invoice.job.jobId},this.id, ${actionBean.invoice.job.agencyId});"  type="text" name="job.ccPages" value="${actionBean.invoice.job.ccPages}">
                        </c:if>
                        <c:if test="${!actionBean.invoice.agencyEditable}">
                          <span id="ccValView${actionBean.invoice.job.jobId}" class="edit">${actionBean.invoice.job.ccPages}</span>
                          <input style="display:none"  id="ccVal${actionBean.invoice.job.jobId}" onchange="saveccvalue(${actionBean.invoice.job.jobId},this.id, ${actionBean.invoice.job.agencyId});"  onblur="saveSelectedJob(${actionBean.invoice.job.jobId},true);saveccvalue(${actionBean.invoice.job.jobId},this.id, ${actionBean.invoice.job.agencyId});"  type="text" name="job.ccPages" value="${actionBean.invoice.job.ccPages}">
                        </c:if>
                    </div>
                    <div class="job-column services-reimbured">
                     
                        <c:if test="${actionBean.invoice.job.servicesReimbursed}">
                            <c:if test="${actionBean.invoice.agencyEditable}">
                              <span class="view" id="servicereimtext${actionBean.invoice.job.jobId}"><a href="javascript:{}" onclick="getAllReimbursedServices(${actionBean.invoice.job.jobId},'servicesReim${actionBean.invoice.job.jobId}','reim')">${actionBean.invoice.job.servicesReimbursedType}</a></span>
                            </c:if>
                            <c:if test="${!actionBean.invoice.agencyEditable}">
                              <span id="servicereimtext${actionBean.invoice.job.jobId}">${actionBean.invoice.job.servicesReimbursedType}</span>
                            </c:if>
                       </c:if>
                        <c:if test="${!actionBean.invoice.job.servicesReimbursed}">
                             <c:if test="${actionBean.invoice.agencyEditable}">
                               <span class="view" id="servicereimtext${actionBean.invoice.job.jobId}">${actionBean.invoice.job.servicesReimbursedType}</span>
                             </c:if>
                             <c:if test="${!actionBean.invoice.agencyEditable}">
                               <span id="servicereimtext${actionBean.invoice.job.jobId}">${actionBean.invoice.job.servicesReimbursedType}</span>
                             </c:if>
                       </c:if>
                       <c:if test="${actionBean.invoice.agencyEditable}">
                        <span class="edit">
                       </c:if>
                       <c:if test="${!actionBean.invoice.agencyEditable}">
                        <span  style="display:none">
                       </c:if>
                        <c:if test="${actionBean.invoice.job.servicesReimbursed}">
                          <select name="job.servicesReimbursed"  onchange="getAllReimbursedServices(${actionBean.invoice.job.jobId},this.id,'reim')" onblur="saveSelectedJob(${actionBean.invoice.job.jobId},true);"  id="servicesReim${actionBean.invoice.job.jobId}">
                            <option value=false>No</option>
                            <option value=true selected="selected">Yes</option>
                        </select>
                         <a  title="Click here to get all reimbursed services" href="javascript:{getAllReimbursedServices(${actionBean.invoice.job.jobId},'servicesReim${actionBean.invoice.job.jobId}','reim')}"><img alt="Edit"  src="${pageContext.request.contextPath}/images/popup_icon.gif" /></a>
                        </c:if> 
                       <c:if test="${!actionBean.invoice.job.servicesReimbursed}">
                       <select name="job.servicesReimbursed" onchange="getAllReimbursedServices(${actionBean.invoice.job.jobId},this.id,'reim')" onblur="saveSelectedJob(${actionBean.invoice.job.jobId},true);"  id="servicesReim${actionBean.invoice.job.jobId}" >
                       <option value=false selected="selected">No</option>
                       <option value=true>Yes</option>
                        </select>
                        </c:if>  
                       </span>
                     
                    </div>
                    <div class="job-column services-nonreimbured" style="width:78px;">
                        <c:if test="${actionBean.invoice.job.expensesNonReimbursed}" >
                           
                           <c:if test="${actionBean.invoice.agencyEditable}">
                              <span class="view" id="servicenonreimtext${actionBean.invoice.job.jobId}"><a href="javascript:{}" onclick="getAllReimbursedServices(${actionBean.invoice.job.jobId},'expenNonReim${actionBean.invoice.job.jobId}','non')">${actionBean.invoice.job.expensesNonReimbursedType}</a></span>
                            </c:if>
                            <c:if test="${!actionBean.invoice.agencyEditable}">
                              <span  id="servicenonreimtext${actionBean.invoice.job.jobId}">${actionBean.invoice.job.expensesNonReimbursedType}</span>
                            </c:if>
                         
                         </c:if>
                        <c:if test="${!actionBean.invoice.job.expensesNonReimbursed}" >
                          <c:if test="${actionBean.invoice.agencyEditable}">
                               <span class="view" id="servicenonreimtext${actionBean.invoice.job.jobId}">${actionBean.invoice.job.expensesNonReimbursedType}</span>
                             </c:if>
                             <c:if test="${!actionBean.invoice.agencyEditable}">
                               <span id="servicenonreimtext${actionBean.invoice.job.jobId}">${actionBean.invoice.job.expensesNonReimbursedType}</span>
                             </c:if>
                       </c:if>
                        <c:if test="${actionBean.invoice.agencyEditable}">
                          <span class="edit">
                        </c:if>
                        <c:if test="${!actionBean.invoice.agencyEditable}">
                          <span  style="display:none">
                        </c:if>
                       <c:if test="${actionBean.invoice.job.expensesNonReimbursed}" >
                          <select name="job.expensesNonReimbursed" id="expenNonReim${actionBean.invoice.job.jobId}" onchange="getAllReimbursedServices(${actionBean.invoice.job.jobId},this.id,'non')" onblur="saveSelectedJob(${actionBean.invoice.job.jobId},false);" >
                            <option value=false>No</option>
                            <option value=true selected="selected">Yes</option>
                        </select>
                         <a title="Click here to get all non reimbursed services" href="javascript:{getAllReimbursedServices(${actionBean.invoice.job.jobId},'servicesReim${actionBean.invoice.job.jobId}','non')}"><img alt="Edit"  src="${pageContext.request.contextPath}/images/popup_icon.gif" /></a>
                        </c:if>
                       <c:if test="${!actionBean.invoice.job.expensesNonReimbursed}">
                          <select name="job.expensesNonReimbursed"  onblur="saveSelectedJob(${actionBean.invoice.job.jobId},false);" onchange="getAllReimbursedServices(${actionBean.invoice.job.jobId},this.id,'non')" id="expenNonReim${actionBean.invoice.job.jobId}" >
                            <option value=false selected="selected">No</option>
                            <option value=true>Yes</option>
                        </select>
                        <a  title="Click here to get all non reimbursed services" href="javascript:{getAllReimbursedServices(${actionBean.invoice.job.jobId},'servicesReim${actionBean.invoice.job.jobId}','non')}"><img alt="Edit"  src="${pageContext.request.contextPath}/images/popup_icon.gif" /></a>
                        </c:if>
                        </span>
                    </div>
                    <div class="job-column scop-from  date">
                        <span class="view">${actionBean.invoice.job.scopistFromDateString}</span> 
                        <c:if test="${actionBean.invoice.scopistEditable}">              
                         <input class="edit date-picker"  onchange="saveSelectedJob(${actionBean.invoice.job.jobId},false);"  id="scopistFrom${actionBean.invoice.job.jobId}"  type="text" name="job.scopistFromDate"  value="${actionBean.invoice.job.scopistFromDateString}" readonly="readonly">
                        </c:if>
                        <c:if test="${!actionBean.invoice.scopistEditable}">              
                         <span class="edit">${actionBean.invoice.job.scopistFromDateString}</span>
                         <input style="display:none"  onchange="saveSelectedJob(${actionBean.invoice.job.jobId},false);"  id="scopistFrom${actionBean.invoice.job.jobId}"  type="text" name="job.scopistFromDate"  value="${actionBean.invoice.job.scopistFromDateString}" readonly="readonly">
                        </c:if>
                    </div>
                    <div class="job-column prof-from  date">
                        <span class="view">${actionBean.invoice.job.prooferFromDateString}</span>
                        <c:if test="${actionBean.invoice.prooferEditable}">                       
                           <input class="edit date-picker" type="text"  onchange="saveSelectedJob(${actionBean.invoice.job.jobId},false);"  id="prooferFrom${actionBean.invoice.job.jobId}"  name="job.prooferFromDate"  value="${actionBean.invoice.job.prooferFromDateString}" readonly="readonly">
                        </c:if>
                        <c:if test="${!actionBean.invoice.prooferEditable}"> 
                          <span class="edit">${actionBean.invoice.job.prooferFromDateString}</span>
                          <input style="display:none" type="text"  onchange="saveSelectedJob(${actionBean.invoice.job.jobId},false);"  id="prooferFrom${actionBean.invoice.job.jobId}"  name="job.prooferFromDate"  value="${actionBean.invoice.job.prooferFromDateString}" readonly="readonly">
                        </c:if>
                    </div>
                    <div class="job-column notes">
                        <span class="view">${actionBean.invoice.job.notes}</span>
                        <c:if test="${actionBean.invoice.agencyEditable}">
                          <input style="max-width:70px;" class="edit notes note"  id="notes${actionBean.invoice.job.jobId}" onblur="saveSelectedJob(${actionBean.invoice.job.jobId},false);" onchange="saveSelectedJob(${actionBean.invoice.job.jobId},false);"  type="text" name="job.notes" value="${actionBean.invoice.job.notes}">
                        </c:if>
                        <c:if test="${!actionBean.invoice.agencyEditable}">
                          <span class="edit">${actionBean.invoice.job.notes}</span>
                          <input style="display:none;max-width:95px;"  id="notes${actionBean.invoice.job.jobId}" onblur="saveSelectedJob(${actionBean.invoice.job.jobId},false);" onchange="saveSelectedJob(${actionBean.invoice.job.jobId},false);"  type="text" name="job.notes" value="${actionBean.invoice.job.notes}">
                        </c:if>
                    </div>
                    <div class="job-column services-reimbured">
                        
                        <span  id="scopistPayable${actionBean.invoice.job.jobId}"><fmt:formatNumber value="${actionBean.invoice.job.scopistPayable}" type="currency"/></span>
                       
                    </div>
                    <div class="job-column services-nonreimbured">
                        
                        <span id="prooferPayable${actionBean.invoice.job.jobId}"><fmt:formatNumber value="${actionBean.invoice.job.prooferPayable}" type="currency"/> </span>
                    </div>
                    <div class="job-column services-nonreimbured">
                        
                        <span id="netAmount${actionBean.invoice.job.jobId}"><fmt:formatNumber value="${actionBean.invoice.job.netAmount}" type="currency"/></span>
                    </div>
                    <div class="job-column actul-turned-in  date">
                        <span class="view">${actionBean.invoice.job.actualTurnInDateString}</span>
                        <c:if test="${actionBean.invoice.agencyEditable}">
                          <input class="edit date-picker" onchange="saveSelectedJob(${actionBean.invoice.job.jobId},false);" type="text" name="job.actualTurnInDate"  id="actulTurnIn${actionBean.invoice.job.jobId}"  value="${actionBean.invoice.job.actualTurnInDateString}" readonly="readonly">
                        </c:if>
                        <c:if test="${!actionBean.invoice.agencyEditable}">
                          <span class="edit">${actionBean.invoice.job.actualTurnInDateString}</span>
                          <input style="display:none" onchange="saveSelectedJob(${actionBean.invoice.job.jobId},false);" type="text" name="job.actualTurnInDate"  id="actulTurnIn${actionBean.invoice.job.jobId}"  value="${actionBean.invoice.job.actualTurnInDateString}" readonly="readonly">
                        </c:if>
                    </div>
                    <div class="job-column bldue">
                        <span ><fmt:formatNumber value="${actionBean.invoice.job.balanceDue}" type="currency"/></span>
                    </div>
                  </div>
                  <div class="job-row">
                    <div class="job-column status">
                       Status :
                    </div>
                    <div class="job-column status" style="word-wrap:normal;">
                       <span class="view">${actionBean.invoice.job.status.description}</span>
                        <span  id="statusId${actionBean.invoice.job.jobId}"  class="edit">${actionBean.invoice.job.status.description}</span>
                    </div>
                    <div class="job-column status">  
                    </div>
                     <div class="job-column status">  
                    </div>
                     <div class="job-column status">  
                    </div>
                     <div class="job-column status">  
                    </div>
                     <div class="job-column status">  
                    </div>
                     <div class="job-column status">  
                    </div>
                     <div class="job-column status">  
                    </div>
                    
                    
                    <div class="job-column actions">
                      <c:if test="${actionBean.invoice.agencyEditable || actionBean.invoice.scopistEditable || actionBean.invoice.prooferEditable}">
                        <img alt="Edit" class="view edit-job job-action"  src="${pageContext.request.contextPath}/images/edit-icon.png" />
                        <span class="edit cancel-edit job-action" > (X)</span>
                        <input class="edit job-action" type="submit" name="saveJobDtl"  value="save"  src="${pageContext.request.contextPath}/images/save.gif" title="<fmt:message bundle='${help}' key='help.qgl.SAVE'/>">
                     </c:if>
                    </div>
                    
                  </div>
				  <input type="hidden" class="selectedjobid jobId" value="${actionBean.invoice.job.jobId}" />
                  <input type="hidden" name="invoiceedid" value="${actionBean.invoice.invoiceId}" />
                  <c:if test="${actionBean.payableType != null}">
                     <input type="hidden" name="reqType" value="${actionBean.payableType}" />
                  </c:if>
                  <c:if test="${actionBean.payableType == null}">
                     <input type="hidden" name="reqType" value="${actionBean.invoice.payableType}" />
                  </c:if>
                  <input type="hidden" id="jobId${actionBean.invoice.job.jobId}" class="jobId" name="jobId" value="${actionBean.invoice.job.jobId}"/>
               </form> 
				</div> 
            </div>
            
			<div id="userAddrMultiple" style="display:none;">
				<c:forEach items="${actionBean.invoice.resourceAddressList}" var="userAddress" varStatus="uLoop">
				<stripes:hidden name="selectedAddress" id="addrsId${uLoop.index}" value="${userAddress.addressId}"></stripes:hidden>  
				<stripes:radio id="${uLoop.index}" value="" name="user-address-radio" class="user-address-radio"/>          		
          		<span style="font-weight:bold;">Address${uLoop.index + 1}</span>		
				
				<div id="userAddressId${uLoop.index}" style="margin-left:15px;">
					<span style="font-weight:bold;"> ${actionBean.invoice.userFirstName} ${actionBean.invoice.userLastName} </span><br>		         			
                   	<c:if test="${!empty userAddress.address1}"> ${userAddress.address1} <BR /></c:if>
					<c:if test="${!empty userAddress.address2}"> ${userAddress.address2} <BR /></c:if>
                   	<c:if test="${!empty userAddress.city}"> ${userAddress.city}, </c:if> 
					<c:if test="${!empty userAddress.state}"> ${userAddress.state} </c:if>
					<c:if test="${!empty userAddress.zip}"> ${userAddress.zip} </c:if>
                </div>
        		</c:forEach>
        	</div>
        	       	
      	 	<div id="printInvoice">
       		<br class="clear" />
	        
			<div id="addressContainer" class="clear">
			<address>
	           	<div id="selected-address"></div>
	         	<c:if test="${fn:length(actionBean.invoice.resourceAddressList) == 0}"><b>${actionBean.invoice.userFirstName} ${actionBean.invoice.userLastName}</b></c:if>
         		       				 
	       		<c:forEach items="${actionBean.invoice.resourceAddressList}" var="userAddress" varStatus="uLoop">
             	<c:if test="${userAddress.addressId == actionBean.invoice.selectedAddressId}">  
					<stripes:hidden name="selectedAddress" id="selected-address_id" value="${userAddress.addressId}"></stripes:hidden>
					<div id="resource-addresses-div">
					<div id="userAddressId${uLoop.index}"> 
					<stripes:hidden name="selectedAddress" id="addrsId${uLoop.index}" value='${userAddress.addressId}'></stripes:hidden>  
					<b>${actionBean.invoice.userFirstName} ${actionBean.invoice.userLastName} <BR></b>
					<c:if test="${userAddress.address1 != null}">${userAddress.address1} <BR/></c:if>
					<c:if test="${userAddress.address2 != null}"> ${userAddress.address2} <BR/></c:if>
					<c:if test="${userAddress.city != null}"> ${userAddress.city}, </c:if>
					<c:if test="${userAddress.state != null}"> ${userAddress.state} </c:if>
					<c:if test="${userAddress.zip != null}"> ${userAddress.zip} </c:if>
					<br><br>
					</div> 
					</div>
                </c:if>
        		</c:forEach>
			</address>
	        <BR>
	        <address>
				<span class="bold">${actionBean.invoice.billToAddress.userFirstName}</span><br/>
				<c:if test="${!empty actionBean.invoice.billToAddress.address1}">	${actionBean.invoice.billToAddress.address1} <BR /></c:if>
				<c:if test="${!empty actionBean.invoice.billToAddress.address2}">${actionBean.invoice.billToAddress.address2} <BR /></c:if>
				<c:if test="${!empty actionBean.invoice.billToAddress.city}"> ${actionBean.invoice.billToAddress.city}, </c:if> 
				<c:if test="${!empty actionBean.invoice.billToAddress.state}"> ${actionBean.invoice.billToAddress.state} </c:if>
				<c:if test="${!empty actionBean.invoice.billToAddress.zip}"> ${actionBean.invoice.billToAddress.zip} </c:if>
	        </address>
	        </div>
			
			<c:if test="${actionBean.invoice.statusId == 1}">
				<div id="watermark"  style="color:#CCC;font-weight:bold; width:500px;position:absolute;left:250px;"> DRAFT: THIS INVOICE IS NOT POSTED</div>
			</c:if>
	        
			<div id="invoiceContainer" style="display: table;">
					${actionBean.invoice.postDate}	
					<c:set var="invcId" value="${fn:split(actionBean.invoice.invoiceName, '-')}" />
					          	
					<p class="box" style="display: table-row;"><label class="label" style=" display: table-cell;">Invoice  #</label>
					<span style="border-top-width: 1px; display: table-cell;padding-left:10px;">${actionBean.invoice.billToAddress.userFirstName} - ${invcId[1]}</span>
					</p>		
					<p class="box" style="display: table-row;"><label class="label" style=" display: table-cell;">Job #</label><span style="border-top-width: 1px; display: table-cell;padding-left:10px;">${actionBean.invoice.job.jobReference}</span></p>
					<p class="box" style="display: table-row;"><label class="label" style=" display: table-cell;">Date of Job</label><span style="border-top-width: 1px; display: table-cell;padding-left:10px;">${actionBean.invoice.job.takenDateString}</span></p>
					<p class="box" style="display: table-row;"><label class="label" style=" display: table-cell;">Case Name</label><span style="border-top-width: 1px; display: table-cell;padding-left:10px;">${actionBean.invoice.job.caseName}</span>
					</p>
					
					<p class="box" style="display: table-row;"><label class="label" style=" display: table-cell;">Witness Name</label><span style="border-top-width: 1px; display: table-cell;padding-left:10px;">${actionBean.invoice.job.witness}
					</span></p>
					<p class="box" style="display: table-row;"><label class="label" style=" display: table-cell;">Date Due</label><span style="border-top-width: 1px; display: table-cell;padding-left:10px;">${actionBean.invoice.invoiceDueDate}
					</span></p>

					
					</div>    
	      		
            
            
            
            
            <div style="margin-top:10px;float:left;width:100%;background:#e5e5e5;padding:7px;border:1px solid #bbb"  >
            <table width="100%" border="0" cellspacing="0" cellpadding="0"  class="plainData" style="margin-left: 5px;
    text-align: right;">
                    
					   <tr>
                        <th style="text-align:center;margin-left: 5px;">DESCRIPTION TYPE</th>
						
                        <th align="left" valign="middle" style="margin-left: 5px;text-align: right;">ACTUAL</th>
                        <th align="left" valign="middle" style="margin-left: 5px;text-align: right;">RATE</th>
                        <th align="left" valign="middle" style="margin-left: 5px;text-align: right;">AMOUNT</th>
                      </tr>
                      <c:forEach items="${actionBean.invoice.invoiceItemsList}" var="invoiceItem">
                      <tr>
                        <td style="text-align:center;margin-left: 5px;">${invoiceItem.description}</td>
						
                        <td style="margin-left: 5px;text-align: right;">${invoiceItem.units}</td>
                        <td style="margin-left: 5px;text-align: right;"><fmt:formatNumber value="${invoiceItem.price}" type="currency"/></td>
                        <td style="margin-left: 5px;text-align: right;"><fmt:formatNumber value="${invoiceItem.amount}" type="currency"/></td>
					  </tr>
					</c:forEach>
                    
                    </table>
                    
                    <div class="total">
                      <div class="due" style="font-size:12px;margin-right:0px;">
                   <p> <label class="bold label">Total Due  : </label> <fmt:formatNumber value=" ${actionBean.invoice.total}" type="currency"/></p>
                     <p> <label class="bold label">Payment : </label> <fmt:formatNumber value=" ${actionBean.invoice.paidAmnt}" type="currency"/></p>
                        <p style="border-top:1px solid #000;"> <label class="bold label">Balance Due : </label>
                        <c:if test="${actionBean.invoice.balance<0}">-</c:if>
                        <fmt:formatNumber value=" ${actionBean.invoice.balance}" type="currency"/></p>
                     
                   
                    </div>
                    
                    </div>
              
            </div> 
            
            
          </div>
          
          
          <a name="apply" ></a>
           		<div id="applyPayment" style="clear:both;display:none;">
             		<h3 style="margin:0;padding:10px;">Apply Payment</h3>
            		<table width="100%" border="0" cellpadding="0" cellspacing="0" class="plainData">
		              <tr>
		                <th width="14%" align="left">INV #</th>
		                <th width="11%" align="left">A/R</th>
		                
		                <th width="22%" align="left"> <label for="receivedDate">RECEIVED DATE</label></th>
		                <th align="left">PAYMENT MODE </th>
		                <th width="31%" align="left"><label for="paymentRef">PAYMENT REFERENCE</label></th>
		                <th width="22%" align="left"><label for="amount">AMOUNT</label></th>
		              </tr>
					  <tr>
					    <td><span class="box"> ${actionBean.invoice.billToAddress.userFirstName} - ${invcId[1]}</span></td>
					    <td>${actionBean.invoice.billToAddress.userFirstName}</td>
					   
					    <td>
	            			<stripes:text id="receivedDate" name="invoice.paymentDtls.paymentDate" class="mandatoryfield date-picker" readonly="readonly"/>
					    </td>
					     <td>
					     <stripes:select id="paymentMode" name="invoice.paymentDtls.paymentMode" style="width:149px;margin-right:5px;">                				
                				<stripes:options-collection collection="${actionBean.paymentModes}" value="id" label="name"/>
            				</stripes:select> 
					     	
            			</td>
					    <td>
					    	<stripes:text id="paymentRef" name="invoice.paymentDtls.paymentReference"/>					    
					    </td>
					    <td>
					    	<stripes:text id="amount" class="numberval" name="invoice.paymentDtls.amount"/>
					    </td>
					  </tr>
  					<tr>
    					<td colspan="5"><span style="height:50px">
      					<input type="button" class="button" value="Apply" onclick="callAjaxToApplyPaymentReceivable(${actionBean.invoice.invoiceId}, 'false', $('#paymentMode').val(),  $('#paymentRef').val(), $('#amount').val(),  $('#receivedDate').val());"/>
      					<div class="buttonEnding"></div>
    					</span></td>
    				</tr>
            	</table>
            </div>
            <c:if test="${actionBean.invoice.paymentsList != null}">
            <div id="previousPaymentDetails" style="clear:both;">
             		<h3 style="margin:0;padding:10px;">Previous Payment Details</h3>
            		<table width="100%" border="0" cellpadding="0" cellspacing="0" class="plainData">
		              <tr>
		                <th width="14%" align="left">INV #</th>
		                <th width="11%" align="left">A/R</th>
		                
		                <th width="15%" align="left"> <label for="receivedDate">RECEIVED DATE</label></th>
		                <th width="15%" align="left">PAYMENT MODE </th>
		                <th width="25%" align="left"><label for="paymentRef">PAYMENT REFERENCE</label></th>
		                <th width="11%" align="right"><label for="amount">AMOUNT</label></th>
		              </tr>
		              <c:forEach items="${actionBean.invoice.paymentsList}" var="payment" varStatus="paymentStatus">
					  <tr>
					    <td><span class="box"> ${actionBean.invoice.billToAddress.userFirstName} - ${invcId[1]}</span></td>
					    <td>${actionBean.invoice.billToAddress.userFirstName}</td>
					   
					    <td>
	            			${payment.paymentDateString}
					    </td>
					     <td>
					       ${payment.paymentModeType}		
            			</td>
					    <td>
					    	${payment.paymentReference}			    
					    </td>
					    <td style="text-align:right;">
					    	
					    	<fmt:formatNumber value="${payment.amount}" type="currency"/></td>
					    </td>
					  </tr>
					  </c:forEach>
            	</table>
            </div>
          </c:if>
          
         </div>  
        
        <!--End of left panel -->  
           <div class="td c2">
           <div class="invoiceLinks" id="actionsContainer">
         		<h3>Accounts </h3>
         		<c:if test="${actionBean.invoice.statusId == 1}">
                 <a href="javascript:{}" class="edit detailsLink" id="editInv" style="width:23px;" title="Click here to edit the invoice details.">Edit</a>
                </c:if>
                
                <c:if test="${actionBean.invoice.statusId != 1}">
                 <a href="javascript:{}" style="width:23px;color:tan;" class="edit disabled" id="">Edit</a>
                </c:if>
                          
                <c:if test="${actionBean.invoice.statusId == 1}">
                <a href="javascript:{}" class="post pop" name="modal" onClick="callAjaxToStatusChangeForInvoice(${actionBean.invoice.invoiceId},${actionBean.invoice.job.jobId},2);" style="width:25px;" style="width:24px;" title="Click here to post the invoice,After post you cannot edit the job.">Post</a>
                </c:if>
                
                <c:if test="${actionBean.invoice.statusId != 1}">
                <a href="javascript:{}" style="width:24px;color:tan;" class="post pop disabled" name="modal">Post</a>
                </c:if>
                
                <c:if test="${actionBean.invoice.statusId == 2 || actionBean.invoice.statusId == 3 || actionBean.invoice.statusId == 4}">                
                <a href="javaScript:showEmailForm();" class="send" style="width:24px;" title="Click here to send invoice details.">Send</a>
                </c:if>
                
                <c:if test="${actionBean.invoice.statusId == 1 || actionBean.invoice.statusId == 5}">                
                <a href="javascript:{}" style="width:24px;color:tan;" class="send disabled">Send</a>
                </c:if>                
                
                <c:if test="${actionBean.invoice.statusId == 1 || actionBean.invoice.statusId == 2}">
                <a href="javascript:{}" class="void pop" name="modal" onClick="callAjaxToStatusChangeForInvoice(${actionBean.invoice.invoiceId},${actionBean.invoice.job.jobId},5);" style="width:24px;" title="Click here to cancel this invoice.">Void</a>
                </c:if>
                
                <c:if test="${actionBean.invoice.statusId == 3 || actionBean.invoice.statusId == 4 || actionBean.invoice.statusId == 5}">
                <a href="javascript:{}" style="width:24px;color:tan;" class="void pop disabled" name="modal" >Void</a>
                </c:if>
                
                <c:if test="${actionBean.invoice.statusId == 1 || actionBean.invoice.statusId == 2}">
                <a href="javascript:{}" class="edit" onClick="callAjaxToStatusChangeForInvoice(${actionBean.invoice.invoiceId},${actionBean.invoice.job.jobId},6);" style="width:79px;" title="Click here to void this invoice and create new invoice.">Void and New</a>
                </c:if>
                
                <c:if test="${actionBean.invoice.statusId == 3 || actionBean.invoice.statusId == 4 || actionBean.invoice.statusId == 5}">
                <a href="javascript:{}" style="width:79px;color:tan;" class="edit disabled">Void and New</a>
                </c:if>
                
                <c:if test="${actionBean.invoice.statusId == 3 ||actionBean.invoice.statusId == 2}">
                <a href="javascript:{}" class="full" id="applyPaymentLink"  style="width:92px;" title="Click here to apply payable amount.">Apply Payment</a> 
                </c:if> 
                
                <c:if test="${actionBean.invoice.statusId == 1 || actionBean.invoice.statusId == 4 || actionBean.invoice.statusId == 5}">
                <a href="javascript:{}" style="width:86px;color:tan;" class="full disabled" id="">Apply Payment</a> 
                </c:if>  
                
                <a href="javascript:{}" class="print" id="printLink" style="width:27px;" title="Click here to print this invoice.">Print</a>       
          </div>
          </div>
       </div>
       
     <div class="processImage"></div>
</stripes:form>



<%-- <div style="overflow:hidden" id="helpContainer">
  <div id="helpContent" class="helpContentContainer"  style="display:none">
    <div style="text-align:right;padding:0px;margin:0px;margin-top:-5px;"><img src="${pageContext.request.contextPath}/images/billing/delete-icon.gif" width="16" height="16" alt="Close" id="close"/></div>
    <p>This is Contextual Help Section for Depo Solutions</p>
  </div>
  <div style="float:right;color:#FFF;"><a href="#" id="slidebutton"><img src="${pageContext.request.contextPath}/images/billing/helpicon.png"  alt="Help" width="36" height="94" border="0" /></a></div>
</div> --%>

<script>

var applyPaymentFlag = false;
$(document).ready(function(){
	var currentTime = new Date();
	var month = currentTime.getMonth() + 1;
	var day = currentTime.getDate();
	var year = currentTime.getFullYear();
	$("#curDate").html(month + "/" + day + "/" + year); 
	
	
	$(".numberval").live("blur",function(){
		values=($(this).val()).split('.');
		one=values[0];
		two=values[1];
		
		var num = one;
		var one1 = num.toString();
		one1 = one1.replace(/^0+/,'');
		
		if(one=='' && two == '' ){ 
			
			var num=0;
			$(this).val(num.toFixed(2));
			return false;
		}
		
		var value1 = $.trim($(this).val());
		if(value1=='' || value1 == 0 ){ 
			
			var num=0;
			$(this).val(num.toFixed(2));
			return false;
		}
		
		var precisionflag=isNaN(one)?false:true;
		var scaleflag=isNaN(two)?false:true;
				
		if(!precisionflag){ 
			var num=0;
			$(this).val(num.toFixed(2));
		}
		else if(!scaleflag){
			var num=parseInt(one1,10).toFixed(2);
			$(this).val(num);
		}
		else if(values.length>1){
			if(!scaleflag && precisionflag)
			{
			var num=one;
			$(this).val(num.toFixed(2));
			}
			else if(scaleflag){
		   	var numaddO = one1+"."+two;
			var num=roundNumber(numaddO,2);
			
			if(!isNaN(num.toString().split(".")[1]))
			{
			var numaddO =  num.toString().split(".")[1].length==1?one1+"."+num.toString().split(".")[1]+"0":num;
			//alert(numaddO);
			$(this).val(numaddO);
			}
			else{
			var num=parseInt(numaddO,10).toFixed(2);
			$(this).val(num);
			}
			}
			
		}
				
		
	});
	function roundNumber(num, dec) {
	var result = Math.round(num*Math.pow(10,dec))/Math.pow(10,dec);
	return result;
	}
});


function showAddresses(){
	$('#userAddrMultiple').css('display','block');
	
	$('#userAddrMultiple').dialog({
		height: "auto",
		width: 300,
		modal: true,
		title:"Select  Address",
		buttons: {
			"Select": function() {
				$(".user-address-radio").each(function(){
						 if($(this).is(":checked")){
							 
							 
							 var number = $(this).attr('id');
								var addrsId="#addrsId"+number;
								var selectedUserAddressId = $(addrsId).val();
								var invoiceId = '${actionBean.invoice.invoiceId}';
								callAjaxToUpdateUserAddressId(selectedUserAddressId,invoiceId);
							 
							 
						 $('#resource-addresses-div').html('');
						 $('#resource-addresses-div').html($('#userAddressId'+$(this).attr('id')).html());
						 $('#selected-address_id').val($('#addrsId'+$(this).attr('id')).val());
						 }
					  });
					$( this ).dialog( "close" );
				},
			
		},
		close: function() {
			//allFields.val( "" ).removeClass( "ui-state-error" );
		}
	});
	
}

$("#applyPaymentLink").click(function () {
	 $("#applyPayment").toggle(500);
	 if(!applyPaymentFlag)
	 {
	  applyPaymentFlag = true;
	   //$('.plainData').find(':input[value=""]:first').focus();
	   $('.plainData').find('#amount').focus();
	   $("html, body").animate({ scrollTop: $(document).height() }, 1000);
	 }
	 else
		 applyPaymentFlag = false;
	
	
	
});

$("#printLink").click(function(){
 	var DocumentContainer = document.getElementById('printInvoice');
    var WindowObject = window.open('', 'PrintWindow', 'width=950,height=750,top=50,left=50,toolbars=no,scrollbars=yes,status=no,resizable=yes');
	
	WindowObject.document.write("<style>#watermark{display:block;} #invoiceContainer .box {background: none repeat scroll 0 0 #FFFFFF;border: 1px solid #CCCCCC;clear: both; float: right;font: 12px/20px Tahoma,trebuchet ms;margin-bottom: 3px; margin-top: 0; padding: 0; text-align: left;   width: 270px;}#invoiceContainer .box .label {background: none repeat scroll 0 0 #F3F3F3;border-right: 1px solid #CCCCCC;display: inline-block;font-weight: bold;    margin-right: 5px; padding-left: 10px; padding-right: 10px; width: 100px;}.total {    font-size: 14px;}   .total .due { float: right; margin: 0 100px 0 0; padding: 0;    text-align: right;  width: 250px;}.bold {font-weight: bold;} .total .label {display: inline-block;float: left;margin: 0; padding: 0; text-align: right;width: 170px;}.plainData th {background: none repeat scroll 0 0 #EFEFEF; padding: 10px 5px;}.plainData td {padding: 5px;}.plainData {    background: none repeat scroll 0 0 #F8F8F8;border: 1px solid #CCCCCC;font: 12px tahoma,Helvetica,sans-serif;} #addressContainer { float: left; margin: 0;    padding: 0; width: 25%;}.clear {  clear: both;}address { color: #666666; font-size: 13px;    font-style: normal;} #invoiceContainer { float: right;    text-align: right; width: 70%;}</style>");
    WindowObject.document.writeln("<div style='width:98%'>");
	WindowObject.document.writeln(DocumentContainer.innerHTML);
	WindowObject.document.writeln("<input type='button' onclick='prints()' id='print' style='float:right;padding:5px;' value='print'></a>");
	WindowObject.document.writeln("</div>");
	WindowObject.document.writeln("<script>function prints(){document.getElementById('print').style.display ='none';print();window.close();}<\/script>");
    WindowObject.document.close();
    WindowObject.focus();
	//WindowObject.print();
    //WindowObject.close();
});

function callAjaxToApplyPaymentReceivable(invId, isPayable, paymentMode, paymentRef, amount, receivedDate ){
	
	var flag =false;
	var numbererrorstr='<div class="ketchup-errorPar"><div class="ketchup-error"><ul><li>Enter Numeric Value.</li></ul><span></span></div></div>'
	var balance = '${actionBean.invoice.balance}';
	var jobId = '${actionBean.invoice.job.jobId}';
	

	var ispartiallyPaid = false;
	if(parseFloat(balance) > parseFloat(amount))
		ispartiallyPaid = true;
	
	
	
	var due = balance - amount;
	if(isNaN(amount))
	{
		flag =true;
	}
	else if(amount <= 0)
	{
		flag =true;
	}
	if(flag)
	{
	$('.numberval').before(numbererrorstr);
	
		return;
	}

		
	
	if(!flag){
	$('.numberval').parent().find(".ketchup-errorPar").remove();
	
	flag = $(".mandatoryfield").RateTableCustomValidator("required",true);
	if(!flag)
	{
		return;
	}
	var paymentDtls ={     
		"invId":invId,
		"isPayable":isPayable,
		"paymentMode": paymentMode, 
		"paymentRef":paymentRef, 
		"amount":amount, 
		"receivedDate":receivedDate,
		"paidStatus":ispartiallyPaid,
		"due":due,
		"jobId":jobId,
		"type":"payable"
	};
	 $.ajaxSetup({
		   jsonp: null,
		   jsonpCallback: null
		});

	    $.ajax({
		  type:'POST',
		  url: 'receivable-invoice.action?applyPaymentReceivable',//name of action?name of method in action
		  dataType: 'json',
		  data: {payment:JSON.stringify(paymentDtls) },
			 
		  success: function(result){
			  
			  window.location.reload()   

		  },
		  error:function() { 
			  
		  }
	});
}
}

function callAjaxToStatusChangeForInvoice(invoiceId,jobId,statusId)
{
	var invoiceDetails ={     
		"invoiceId"	:	invoiceId,
		"type"		:   "payble",
		"status"	:	statusId,
		"jobId"  :jobId
	};
	 $.ajaxSetup({
		   jsonp	: null,
		   jsonpCallback: null
		});

	$.ajax({
		  type		: 'POST',
		  url		: 'receivable-invoice.action?statusChangeForInvoice',
		  dataType	: 'json',
		  data		: {statusDetails:JSON.stringify(invoiceDetails)},
			 
		  success	: function(result){
			  
			  if(statusId  == 2)
				  alert("Your invoice posted successfully.");
			  else if(statusId  == 5)
				  alert("Your invoice voided successfully.");
			  else if(statusId  == 6)
			     alert("Your invoice voided and new invoice created successfully.");
			//window.location.reload();
			//billing-invoice-payable.action?view=&invoiceId=5
					
				/* 	var jobId;
			     var userType;
			     var invoiceId ;
					
					$.each(result,function(key,value){
						
						if(key == "userType"){
							
							if(value == 1)
								userType = receivable;
							else if (value == 2)
								userType ="scopist";
							else if (value == 3)
								userType ="proofer";
							
						}	
						if(key == "JobId")
							jobId = value;
						
						if(key == "invoiceId")							
							invoiceId  = value;
						
					}); */
					
					
					if(statusId  == 5 || statusId  == 6)
						window.location.href ="billing-payable.action";
					else
					    window.location.href ="billing-invoice-payable.action?view=&invoiceId="+invoiceId;
					
			//window.location.href =" billing-invoice-payable.action?generatePayable=&jobId="+jobId+"&payableType="+userType+"";
			  //window.location.href="receivable-invoice.action?viewAgentInvoice=&jobId="+jobId+"&invoiceId="+invoiceId;
		  },
		  error:function() { 
		}
	});
}

function showEmailForm(){
	
	 $('#addMail').html('');
	$('#email-form').dialog({
		height: 300,
		width: 450,
		buttons: {
			"Add New": function() {
				addAnotherMailAddresses();
			},
			"Send":function(){sendMail();},
			"Cancel": function() {		
				$(this).dialog('close');
			}
		  }
	});
	
}

var count=0;

function addAnotherMailAddresses(){
	if(count == 0){
		<c:forEach items="${actionBean.invoice.toMailAddresses}" var="userAddress" varStatus="uLoop">
		 count++;
        </c:forEach>
	}
		
	 $('#addMail').append('<div style="margin:2px 2px 2px 2px;"><input type="checkbox" id=check'+count+' class="emailAddrs"></input> <input id="mailerName'+count+'" type="text" value="" style="width:150px;"></input> <input id=mail'+count+' type="text" style="width:200px;"></input></div>');
	 count++;
}

function sendMail(){
	
	var invoiceId = '${actionBean.invoice.invoiceId}';	

	var emails = new Array();
	var errorFlag = true;
	var emptyEmailFlag = false;
	var invalidEmailFlag = false;
	var invoiceEmail = "";

	$('.emailAddrs').each(function(){
		
		var ids = $(this).attr('id');
		var emailRegEx = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{1,8}$/i;
		invoiceEmail = $('#'+ids).next().next().val();

		if($(this).is(":checked"))
		{
			if($('.emailAddrs').is(':checked') == true)
				errorFlag = false;
			if($('.emailAddrs').is(':checked') == false)
				errorFlag = true;
			else
			{
				if($.trim(invoiceEmail) == "")
					emptyEmailFlag = true;
				else if(!emailRegEx.test(invoiceEmail))
					invalidEmailFlag = true;
			}
		}
		
	});

	if(errorFlag)
	{
		$("#errorMsgDiv").text("Please Select Email.").addClass("errorMsgInnerDiv");
		return;
	}
	else if(emptyEmailFlag)
	{
		$("#errorMsgDiv").text("Please Enter Email.").addClass("errorMsgInnerDiv");
			return;
	}
	else if(invalidEmailFlag)
	{
		$("#errorMsgDiv").text("Please Enter Valid Email.").addClass("errorMsgInnerDiv");
			return;
	}
	else
	{
		$("#errorMsgDiv").empty();
		$("#errorMsgDiv").removeClass("errorMsgInnerDiv");
	}
	
	
	$('.emailAddrs').each(function(){
		var id=$(this).attr('id');
		
		if($('#'+id).is(':checked')){
			
			var email={emailId:$('#'+id).next().next().val()};
			emails.push(email);
		}
	});		
	
	callAjaxToSendEmail(invoiceId,emails);
	
}

function callAjaxToSendEmail(invoiceId,emails){
	$('#ajaxImage').css('display','block');
	
	$.ajaxSetup({
		   jsonp: null,
		   jsonpCallback: null
		});

	    $.ajax({
		  type:'POST',
		  url: 'send-mail.action?sendMailForInvoice',//name of action?name of method in action
		  dataType: 'json',
		  data: {emails:JSON.stringify(emails),invoiceId:invoiceId},
			 
		  success: function(result){
			  $('#ajaxImage').css('display','none');
			  alert("Your mail sent successfully.");
			  $('#email-form').dialog('close');
		  },
		  error:function() { 
			  
		  }
	});
}

function callAjaxToUpdateUserAddressId(userAddressId,invoiceId){
	
	$.ajaxSetup({
		   jsonp: null,
		   jsonpCallback: null
		});

	    $.ajax({
		  type:'POST',
		  url: 'receivable-invoice.action?updateUserAddressId',//name of action?name of method in action
		  dataType: 'json',
		  data: {userAddressId:userAddressId,invoiceId:invoiceId},
			 
		  success: function(result){				  
		  },
		  error:function() { 
			  
		  }
	});
}
$.fn.RateTableCustomValidator=function(validatestring,submit,form){
	var flag = false;
var flagInc = 0;
var Requirederrorstr='<div class="ketchup-errorPar"><div class="ketchup-error"><ul><li>This Field is Required.</li></ul><span></span></div></div>'

if(submit){

	$(this).each(function(i){

   flag=requiredfieldvalidtion($(this).val());	
   
if(!flag){$(this).parent().find(".ketchup-errorPar").remove();$(this).before(Requirederrorstr);
flagInc++;$(this).focus();}
else {$(this).parent().find(".ketchup-errorPar").remove();

}
});

if(flagInc > 0)
	retflag = false;
else 
retflag = true;

}  
$(this).live("blur",function(){
retflag=requiredfieldvalidtion($(this).val());
if (!retflag){$(this).parent().find(".ketchup-errorPar").remove();$(this).before(Requirederrorstr);}
else{$(this).parent().find(".ketchup-errorPar").remove();}
});

return retflag;
}; 
$(document).ready(function(){
	$(".mandatoryfield").RateTableCustomValidator("required",false);
	
});
function requiredfieldvalidtion(eleVal){
	var flag=false;
	if(eleVal=="")
		flag=false;
	else
		flag=true;
		
	return flag;
	}
$(document).ready(function(){
	$(".mandatoryfield").RateTableCustomValidator("required",false);
	
});
</script>

<style>
.backLink{
	color: #0033CC;
	float: right;
	font-weight: bold;
	margin: 5px;
}
.ketchup-errorPar{position:relative;}
.ketchup-errorPar .ketchup-error{position:absolute;left: 47px;
    top: -61px;
    width: 100px;}
#watermark{display:none;}
.toolTip-cust{position:relative;height:auto;}
.toolTip-cust span{
    display:none; position:absolute;
    top:-68px; left:-75px; width:14em;
	font:10px;
   background: rgb(254,252,234); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(254,252,234,1) 0%, rgba(241,218,54,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(254,252,234,1)), color-stop(100%,rgba(241,218,54,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(254,252,234,1) 0%,rgba(241,218,54,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(254,252,234,1) 0%,rgba(241,218,54,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(254,252,234,1) 0%,rgba(241,218,54,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(254,252,234,1) 0%,rgba(241,218,54,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefcea', endColorstr='#f1da36',GradientType=0 ); /* IE6-9 */

    color: #000;
    text-shadow: 0 1px 0 #fff;
	padding:5px;
	border-radius:5px;
	text-align:center;
	border:1px solid #578EB8;
	z-index:99999999999;
	height:45px;
    
}
.toolTip-cust span:after{content:"";border:5px solid transparent;border-top:5px solid #578EB8;top:100%;position:absolute;left:45%;}

.toolTip-cust:focus span,.toolTip-cust:hover span{display:block;
   }
   
.proofer h4,.scopist h4,.agency h4{border-radius:5px;margin:5px;}
.proofer .toolTip-caption,.agency .toolTip-caption,.scopist .toolTip-caption {height:70px;top:-100px;}
.agency .toolTip-caption {left:-47px;}

/*.plainData th{margin-left: 5px;
    text-align: right;}
.plainData td{margin-left: 5px;
    text-align: right;}*/
    
     .job-column {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    border-color: rgba(255, 255, 225, 0.5) rgba(255, 255, 225, 0.5) transparent;
    border-image: none;
    border-style: solid;
    border-width: 1px 1px 2px;
    height: auto;
    margin: 2px 0;
    max-width: 68px;
    padding: 5px;
    width: 48px;
    word-wrap: break-word;
}
.job-column{border:none;border-image:none;}
#applyPayment select:hover,#applyPayment input[type=text]:hover,#applyPayment select:focus,#applyPayment input[type=text]:focus{background:#FFF9B8;}

.errorMsgInnerDiv{background: #FFE4DD;
    border: 1px solid #FFE4DD;
    color: #571D0E;
    font-size: 12px;
    margin: 2px 0 15px;
    padding: 3px 10px;}
.label{width:75px;display:inline-table;}

#rateItemCode .inputs, .input-value {width: 85%;}
#rateItemCode input[type="text"] {border-radius: 5px 5px 5px 5px;}
#modalratetable .code-name, #modalratetable .code-name:focus, #modalratetable .code-name:hover {
    background: none repeat scroll 0 0 #DDDDDD;
    color: black;
}
.ui-dialog-content .inputs, select {border: 1px solid #D4D4D4;padding: 3px;}
.input-desc {width: 95%;}
table select {width: 100%;}
</style>

